<template>
    <div class="chart-wrapper">
        <BaseChart height="100%" :options="chartOption" />
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useReportStore } from '@/stores/report'
import { useI18n } from 'vue-i18n'
import BaseChart from '@/components/chart/BaseChart.vue'
import { formatDate } from '@/utils/date'

const { t } = useI18n()
const reportStore = useReportStore()
const props = defineProps({
    chartType: {
        type: String,
        default: 'bar'
    }
})
const formatChartData = (data) => {
    if (!data?.data?.length) return []
    return data.data.map(item => ({
        time: formatDate(item.start_time, 'MM'),
        value: Number(item.Value || 0).toFixed(2)
    }))
}

const chartOption = computed(() => {
    const currentData = reportStore.getReportDataList('yearly')
    const previousData = reportStore.getReportDataList('yearly', true)

    const formattedCurrentData = formatChartData(currentData)
    const formattedPreviousData = formatChartData(previousData)

    if (!formattedCurrentData.length && !formattedPreviousData.length) return null

    return {
        title: t('date.title.yearly'),
        xAxisData: formattedCurrentData.map(item => item.time),
        series: [
            {
                name: t('date.label.lastYear'),
                data: formattedPreviousData.map(item => item.value),
                type: props.chartType,
                showExtremum: true
            },
            {
                name: t('date.label.thisYear'),
                data: formattedCurrentData.map(item => item.value),
                type: props.chartType,
                showExtremum: true
            }
        ],
        customColors: ['#d7ebff', '#409EFF'],
        showMarkLine: true,
        showZoom: false
    }
})
</script>

<style scoped>
.chart-wrapper {
    height: 100%;
}

@media screen and (max-width: 1024px) {
    .chart-wrapper {
        min-height: 30rem;
    }
}

@media screen and (max-width: 768px) {
    .chart-wrapper {
        min-height: 35rem;
    }
}

@media screen and (max-width: 480px) {
    .chart-wrapper {
        min-height: 40rem;
    }
}
</style>